<template>
  <!-- 登录后所有页面的构建的基础 包含路由导航等 -->
  <v-app>
    <div class="hide-overflow" style="position: relative;">
      <ui-drawer :menu="selectedMenu" />

      <v-toolbar
        style="padding-left: 200px;"
        fixed
        color="secondary"
        dark
        scroll-off-screen
        scroll-target="#scrolling-techniques"
      >
        <v-btn
          class="tab-button"
          v-for="(item, i) of routeList"
          v-if="item.children"
          :key="i"
          :class="{'selected': item.name === selectedTab}"
          flat
          dark
          round
          @click="onRouteClicked(item)"
        >
          <span>{{ item.name }}</span>
        </v-btn>
        <v-spacer></v-spacer>
        <v-avatar @click="onLogout">
          <v-icon>input</v-icon>
        </v-avatar>
      </v-toolbar>

      <div id="scrolling-techniques" class="scroll-y">
        <ui-view />
      </div>
    </div>

    <div class="progress-container" v-if="showProgress">
      <div class="progress elevation-2" @click="showProgress = false">
        <v-progress-circular :size="70" :width="5" color="white" indeterminate></v-progress-circular>
        <div class="white--text">{{ progressText }}</div>
      </div>
    </div>

    <v-snackbar v-model="snackbar" :timeout="timeout" top>
      {{ snackbarText }}
      <v-btn color="pink" flat round @click="snackbar = false">关闭</v-btn>
    </v-snackbar>
  </v-app>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
// import { mapActions } from 'vuex';
import { extendRoutes, menuRoutes } from "@/routes/routes";
import  {buildMenu, buildMenuConsole, buildMenuNoMenu} from '@/utils/commonUtils';
import Cookie from 'js-cookie';

declare const $Vue: Vue;
// Component装饰器必须要加
@Component
export default class Home extends Vue {
  private drawer: boolean = true;

  private showProgress: boolean = false;
  private progressText: string = "加载中...";

  private title: string = "";
  private snackbarText: string = "";

  private snackbar: boolean = false;
  private timeout: number = 4000;

  private selectedMenu: Array<any> = [];
  private selectedTab: string = "";

  private routeList: Array<any> = [
    // {
    //   name: "待办事项",
    //   children: [
    //     {
    //       path: "ActivityList",
    //       icon: "list",
    //       name: "活动列表"
    //     },
    //     {
    //       path: "OrderList",
    //       icon: "shopping-cart",
    //       name: "订单列表"
    //     },
    //     {
    //       path: "TopupRecord",
    //       icon: "cc-visa",
    //       name: "充值记录"
    //     },
    //     {
    //       path: "Withdraw",
    //       icon: "credit-card",
    //       name: "提现管理"
    //     },
    //     {
    //       path: "ShopList",
    //       icon: "institution",
    //       name: "店铺列表"
    //     },
    //     {
    //       path: "BuyerList",
    //       icon: "users",
    //       name: "买手列表"
    //     }
    //   ]
    // },
    // {
    //   name: "内容管理",
    //   children: [
    //     {
    //       path: "ArticleSort",
    //       icon: "file-word-o",
    //       name: "文章分类"
    //     },
    //     {
    //       path: "ArticleManagement",
    //       icon: "file-text",
    //       name: "文章管理"
    //     },
    //     {
    //       path: "Anouncement",
    //       icon: "bullhorn",
    //       name: "公告管理"
    //     }
    //   ]
    // },
    // {
    //   name: "用户管理",
    //   children: [
    //     {
    //       path: "UserList",
    //       icon: "users",
    //       name: "用户列表"
    //     },
    //     {
    //       path: "FreezeUser",
    //       icon: "user-times",
    //       name: "冻结用户"
    //     },
    //     {
    //       path: "FinanceDetail",
    //       icon: "money",
    //       name: "财务明细"
    //     }
    //   ]
    // },
    // {
    //   name: "系统设置",
    //   children: [
    //     {
    //       path: "Setting",
    //       icon: "cog",
    //       name: "系统设置"
    //     },
    //     {
    //       path: "Statistics",
    //       icon: "bar-chart",
    //       name: "数据统计"
    //     },
    //     {
    //       path: "Pay",
    //       icon: "paypal",
    //       name: "支付设置"
    //     },
    //     {
    //       path: "BlackList",
    //       icon: "list-alt",
    //       name: "黑名单"
    //     },
    //     {
    //       path: "LoginLog",
    //       icon: "file-text-o",
    //       name: "登录日志"
    //     }
    //   ]
    // },
    // {
    //   name: "管理员",
    //   children: [
    //     {
    //       path: "User",
    //       icon: "user-circle-o",
    //       name: "用户管理"
    //     },
    //     {
    //       path: "Role",
    //       icon: "vcard",
    //       name: "角色管理"
    //     },
    //     {
    //       path: "ManageLog",
    //       icon: "vcard",
    //       name: "管理日志"
    //     }
    //   ]
    // }
  ];

  protected mounted() {
    // this.getTags();
    this.registerProgress();
    this.registerTitle();
    this.registerSnackbar();
    let routeList: any = localStorage.getItem('routeList')
    if (routeList) {
      this.routeList = buildMenu(menuRoutes, JSON.parse(routeList));
    }
    // 更改路由时本地测试开关 使用线上路由权限需注释
    this.routeList = buildMenuNoMenu(menuRoutes, extendRoutes);
    console.warn(this.routeList)

    // TODO 校验
    this.selectedMenu = this.routeList[0].children;
    this.selectedTab = this.routeList[0].name;

    this.handleRefreshRoute();
  }

  private onLogout() {
    // this.handleLogout();
    this.$router.push({
      name: '登录',
    });
    Cookie.remove('console_token');
    Cookie.remove('userId');
  }


  /**
   * 处理刷新之后tab丢失
   */
  private handleRefreshRoute() {
    let path = this.$route.path;
    let pathArray = path.split('/');
    pathArray = pathArray.filter((item: string) => {
      return item !== ''
    });
    if (pathArray[0] === 'Home') {
      this.routeList.forEach((item: any) => {
        if (item.children) {
          item.children.forEach((subItem: any) => {
            if (subItem.path === pathArray[1]) {
              // 找到路由中相等的child
              this.selectedMenu = item.children;
              this.selectedTab = subItem.name;
            }
          })
        }
      })
    }
  }

  private onRouteClicked(item: any) {
    this.selectedMenu = item.children;
    this.selectedTab = item.name;

    if (item.children.length !== 0) {
      this.$router.push(item.children[0].path);
    }
  }

  // 注册加载进度
  private registerProgress() {
    const $this = this;
    $Vue.$on("show_progress", (data: { message: string }) => {
      $this.showProgress = true;
      if (data.message) {
        $this.progressText = data.message;
      } else {
        $this.progressText = "加载中...";
      }
    });
    $Vue.$on("hide_progress", () => {
      this.showProgress = false;
    });
  }

  // 注册加载进度
  private registerTitle() {
    const $this = this;
    $Vue.$on("title", (data: { message: string }) => {
      $this.title = data.message;
    });
  }
  // 注册提示条
  private registerSnackbar() {
    const $this = this;
    $Vue.$on("snackbar", (data: { message: string }) => {
      this.snackbarText = data.message;
      this.snackbar = true;
    });
  }
}
</script>


<style lang="less" scoped>
.progress-container {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: #00000011;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  .progress {
    width: 12rem;
    height: 12rem;
    border-radius: 2rem;
    background: #8b8b8bad;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
}
</style>

